<template>
  <Row :gutter="10">
    <Col :span="4">
      <Select v-model:value="type" style="width: 100%">
        <Select.Option value="">全部</Select.Option>
        <Select.Option value="iworkflow_">iWorkflow</Select.Option>
        <Select.Option value="wfmobile_">iWorkflow移动端</Select.Option>
        <Select.Option value="wfapi_">Web Api接口</Select.Option>
        <Select.Option value="none">None</Select.Option>
      </Select>
    </Col>
    <Col :span="4">
      <Input v-model:value="version" allowClear placeholder="请输入过滤的版本" />
    </Col>
    <Col :span="4" class="btn-group">
      <Button type="primary" shape="round" @click="searchImages"><SendOutlined /> 执行</Button>
      <Button type="danger" shape="round" @click="removeImages"><DeleteOutlined /> 删除</Button>
    </Col>
  </Row>
  <div ref="headerElement" class="shell" style="margin-top: 5px;">
    <p class="code" v-html="replaceWhitespace(imageCommand)"></p>
  </div>
  <div ref="detailsElement" class="shell details" :style="{ maxHeight: maxHeight - 70 + 'px' }">
    <p v-html="replaceWhitespace(header)" style="font-weight: bold;"></p>
    <p v-for="img of details" v-html="replaceWhitespace(img)"></p>
  </div>
</template>
<script setup>
  import { ref, inject, computed, onMounted } from 'vue';
  import { Row, Col, Input, Select, Button } from 'ant-design-vue';
  import { SendOutlined, DeleteOutlined } from '@ant-design/icons-vue';

  import { replaceWhitespace } from '@/libs/helpers';

  const props = defineProps({
    maxHeight: String | Number
  });

  const $http = inject('$http');

  const headerElement = ref();
  const detailsElement = ref();

  const type = ref('');
  const version = ref('');

  const images = ref([]);

  const imageCommand = computed(() => {
    let command = 'docker ps -a | grep -v harbor | grep -v microsoft | grep -v portainer';

    if (type.value) {
      command += ` | grep ${type.value}`;
    }

    if (version.value) {
      command += ` | grep ${version.value}`;
    }

    return command;
  });

  const header = computed(() => {
    if (images.value && images.value.length > 0) {
      return images.value[0].replace('                                            ', '');
    }

    return '';
  });

  const details = computed(() => {
    let rs = [];

    if (images.value && images.value.length > 0) {
      rs = images.value.slice(1, images.value.length);
    }

    rs = rs.map(d => d.replace('                                            ', '') + '  ');

    rs = rs.sort((x, y) => x - y);

    return rs;
  });

  async function searchImages() {
    images.value = [];

    let command = {
      command: imageCommand.value
    };

    let res = await $http.post('/api/shell/exec', command);

    res.datas = res.datas || [];

    if (res.datas.length == 0 || (res.datas.length > 0 && res.datas[0].indexOf('CONTAINER ID') != 0)) {
      res.datas.unshift('CONTAINER ID   IMAGE                                COMMAND                  CREATED             STATUS                  PORTS                                                NAMES');
    }

    images.value = res.datas;
  }

  async function removeImages() {
    images.value = [];

    let command = {
      command: `docker rm $(${imageCommand.value} | awk '{print $3}') &> /home/apps_admin/logs/rm.log; cat /home/apps_admin/logs/rm.log;`
    };

    let res = await $http.post('/api/shell/exec', command);

    images.value = res.datas;
  }

  onMounted(async () => {
    detailsElement.value.addEventListener('scroll', function (e) {
      headerElement.value.scrollTo(e.target.scrollLeft, 0);
    });

    await searchImages();
  });
</script>
